<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
    @close="closeModal"
  >
    <el-form ref="form" :model="form" :show-message="false" label-width="110px">
      <el-form-item label="加工剂型" prop="dosageformValue" required>
        <el-select
          v-model="form.dosageformValue"
          placeholder="请选择加工剂型"
          style="width: 100%"
          clearable
        >
          <el-option
            v-for="dict in dict.type.tcm_dosageform_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="中药类型" prop="categoryId" required>
        <el-cascader
          v-if="open"
          :options="classList"
          placeholder="请选择项目类别"
          :props="{
            label: 'categoryName',
            value: 'categoryId',
            children: 'childList',
            emitPath: false,
          }"
          v-model="form.categoryId"
          filterable
          clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="加工费收取方式" prop="feeType" required>
        <el-radio-group v-model="form.feeType">
          <el-radio :label="0">固定费用</el-radio>
          <el-radio :label="1">按加工单位收费</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="加工费" prop="serviceFee" required>
        <el-input-number v-model="form.serviceFee" placeholder="请输入加工费" :precision="2" :min="1" :controls="false" />
      </el-form-item>
      <el-form-item label="制作最低标准" prop="doseMin" required>
        <el-input-number v-model="form.doseMin" placeholder="请输入制作最低标准" :precision="0" :min="1" :controls="false" />
        <span class="ml-10">g</span>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addDosageform, updateDosageform } from '@/api/logistics/index.js'
import { deepClone } from '@/utils';
import { categoryTree } from "@/api/service";
export default {
  dicts: [
    "tcm_dosageform_type"
  ],
  data() {
    return {
      title: "新增剂型",
      open: false,
      form: {
        id: undefined,
        dosageForm: undefined,
        dosageformValue: undefined,
        categoryId: undefined,
        serviceFee: undefined,
        doseMin: undefined,
        feeType: 0
      },
      classList: []
    };
  },
  methods: {
    openModal(row) {
      this.serviceItemsChange();
      if (row && row.id) {
        this.title = "编辑剂型";
        this.form = deepClone(row);
      }
      this.open = true;
    },

    closeModal() {
      this.$refs["form"].resetFields();
      Object.assign(this.$data, this.$options.data()); // 存在自定义校验规则不能重置data
    },
    // 查询项目类别列表
    async serviceItemsChange() {
      const { data } = await categoryTree({serviceItems: 4, categoryId: 1});
      this.classList = data;
    },
    /** 提交按钮 */
    submitForm() {
      const that = this;
      const _dosageform = that.dict.type.tcm_dosageform_type.find(v=> v.value == that.form.dosageformValue);
      if(!_dosageform){
        that.form.dosageformValue = undefined;
        that.form.dosageForm = undefined;
      }else{
        that.form.dosageForm = _dosageform.label;
      }
      that.$refs["form"].validate(async (valid) => {
        if (valid) {
          if (that.form.id) {
            await updateDosageform(that.form)
          } else {
            await addDosageform(that.form);
          }
          that.$message.success(that.form.id ? '修改成功' : '新增成功');
          that.$emit('refresh');
          that.closeModal()
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
